<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/template-web.js"></script>
    <script src="./js/hero.js"></script>
    <link rel="stylesheet" href="./css/hero.css" />
  </head>
  <body>
    <header>
      <div class="big_img">
        <img src="./images/0.jpg" alt="" />
      </div>
    </header>
    <div class="wraper">
      <!-- 导航 -->
      <div class="website-path"></div>
      <div class="colbox">
        <div class="pagetab"></div>
        <!-- 英雄列表 -->
        <div class="info-showbox">
          <div id="seleteChecklist">
            <div class="herotab">
              <input
                class="heroType"
                type="radio"
                name="hero"
                value="all"
                checked="checked"
              />
              <span>所有英雄</span>

              <input
                class="heroType"
                type="radio"
                name="hero"
                value="fighter"
              />
              <span>战士</span>

              <input class="heroType" type="radio" name="hero" value="mage" />
              <span>法师</span
              ><input
                class="heroType"
                type="radio"
                name="hero"
                value="assassin"
              />
              <span>刺客</span>

              <input class="heroType" type="radio" name="hero" value="tank" />
              <span>坦克</span>

              <input
                class="heroType"
                type="radio"
                name="hero"
                value="marksman"
              />
              <span>射手</span>

              <input
                class="heroType"
                type="radio"
                name="hero"
                value="support"
              />
              <span>辅助</span>
            </div>
            <div class="seach">
              <input
                type="text"
                id="searchHero"
                placeholder="输入要搜索的英雄关键字"
              />
            </div>
          </div>
          <div class="heroBox">
            <div class="row">
              <div class="heroInfo" style="background-color: hotpink">
                <div class="img">
                  <img src="#" alt="" />
                </div>
                <span>子项1</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/html" id="tmp">
      {{each list v}} {{if
      roles=="all"||v.roles.indexOf(roles)!==-1||v.keywords.indexOf(keyword)!==-1}}
      <div class=" heroInfo">
        <div class="img">
          <img
            src="	https://game.gtimg.cn/images/lol/act/img/champion/{{v.alias}}.png"
            alt=""
          />
        </div>
        <span>{{v.name}}</span>
      </div>
      {{/if}} {{/each}}
    </script>
  </body>
</html>
